<template>
  <div class="performance-module-item">
    <div class="menu-content">
      <template v-if="dataList.length > 0">
        <el-carousel
          class="swiper-header"
          :height="bannerDataList.length > 4 ? '250px' : '125px'"
          arrow="always"
          :loop="false"
          :autoplay="false"
        >
          <el-carousel-item v-for="(list, index) in dataList" :key="index">
            <div class="swiper-content">
              <div class="swiper-menu">
                <div
                  class="swiper-item"
                  v-for="(item, ids) in list"
                  :key="ids"
                  @click="goDetail(item)"
                  @mouseenter="handleMouseEnter(item, true)"
                  @mouseleave="handleMouseEnter(item, false)"
                >
                  <template v-if="item.id">
                    <div class="content-title">
                      <show-tooltip width="246px" :content="item.targetName" />
                    </div>
                    <div class="content-detail">
                      <div class="content-left">
                        <div class="content-num">{{ item.nowNum || '--' }}</div>
                        <div class="content-rote">
                          <div class="content-rote-title">同比</div>
                          <template v-if="item.nowNumTqRate">
                            <el-icon>
                              <CaretTop v-if="item.nowNumTqRate > 0" class="green" />
                              <CaretBottom v-else class="red" />
                            </el-icon>
                            <div
                              :class="['content-rote-num', item.nowNumTqRate > 0 ? 'green' : 'red']"
                            >
                              {{ item.nowNumTqRate }}%
                            </div>
                          </template>
                          <div v-else class="content-rote-num">--</div>
                        </div>
                      </div>
                      <div class="content-right">
                        <lineCharts v-if="item.timeChart" :timeChart="item.timeChart" />
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="add_menu">
                      <el-icon size="30">
                        <Plus />
                      </el-icon>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </template>
      <template v-else>
        <div class="center-right-no-data">暂无相关业绩数据</div>
      </template>
    </div>
  </div>
</template>

<script setup>
import ShowTooltip from '@/components/showTooltip/index.vue'
import { Plus, CaretTop, CaretBottom } from '@element-plus/icons-vue'
import { perFromModuleData } from './modules/baseData'
import lineCharts from './lineCharts.vue'
const { dataList, bannerDataList, handleMouseEnter, goDetail } = perFromModuleData()
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
